<main-layout [sliderWidth]="sliderWidth" (toggle)="this.toggleCollapsed($event)">
  <main-content>
    <div class="product-operate clearfix">
      <div nz-col [nzSm]="12">
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="addSpec(0)">
          <i class="anticon anticon-plus"></i><span>新建分类</span>
        </button>
      </div>
    </div>
    <div class="product-list-out mt-16">
      <div class="checked-line" *ngIf="!!checkedIds.length">
        <i class="anticon anticon-info-circle"></i> 已选择 <span>{{checkedIds.length}}</span> 项
        <a href="javascript:;" (click)="checkedIds=[];_indeterminate=false;_checkAll(false);">清空</a>
      </div>
      <nz-table #nzTable [(nzLoading)]="loading"
                [nzCustomNoResult]="true"
                [(nzPageSize)]="pageSize"
                [(nzPageIndex)]="page"
                [(nzTotal)]="total"
                (nzPageIndexChange)="getTemplateList()"
                [nzDataSource]="templateList"
                >
        <thead nz-thead>
        <tr>
          <!--<th nz-th [nzExpand]="true"></th>-->
          <th nz-th style="width: 300px;"><span>名称</span></th>
          <!--<th nz-th><span>内容图片</span></th>-->
          <!--<th nz-th><span>备注</span></th>-->
          <th nz-th>
            <span>排序</span>
            <nz-table-sort  (nzValueChange)="sort($event)"></nz-table-sort>
          </th>
          <th nz-th><span>时间</span></th>
          <th nz-th style="width: 260px"><span>操作信息</span></th>
        </tr>
        </thead>
        <tbody nz-tbody *ngIf="templateList.length > 0">
        <ng-template ngFor let-data [ngForOf]="nzTable.data">
          <ng-template ngFor let-item [ngForOf]="expandDataCache[data.id]">
            <tr nz-tbody-tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
              <td nz-td>
                <nz-row-indent [nzIndentSize]="item.level"></nz-row-indent>
                <nz-row-expand-icon [(nzExpand)]="item.expand" *ngIf="item.son&&item.son.length>0" (nzExpandChange)="collapse(expandDataCache[data.id],item,$event)" [nzShowExpand]="!item.son"></nz-row-expand-icon>
                {{item.name}}
              </td>
              <td nz-td>{{item.sort}}</td>
              <td nz-td>{{item.created_at}}</td>
              <td nz-td>
                <a (click)="addSpec(item.id)" *ngIf="!(item.parent)">添加子分类</a>
                <!--<a (click)="addSpec(item.id)" *ngIf="item.parent&&(!item.parent.parent)">添加属性</a>-->
                <span nz-table-divider class="span-divider"></span>
                <a  *ngIf="!item.parent" (click)="editPage(item,0)">编辑</a>
                <a  *ngIf="item.parent" (click)="editPage(item,1)">编辑</a>
                <span nz-table-divider class="span-divider"></span>
                <a (click)="showDeleteConfirm(item.id)">删除</a>
              </td>
            </tr>
          </ng-template>
        </ng-template>
        </tbody>
        <div noResult>
          <div class="text-center" style="margin-top:132px;margin-bottom:100px;">
            <i class="empty-icon"></i>
            <p>目前并无分类页</p>
            <p>请添加分类页</p>
          </div>
        </div>
      </nz-table>
    </div>
  </main-content>
</main-layout>


<!-- 添加弹窗 -->
<nz-modal [nzVisible]="addModalVisible" [nzTitle]="(isEdit?'编辑':'添加')+'分类'" [nzWidth]="'700px'" [nzContent]="couponModalContent"
          (nzOnCancel)="closeCouponModal()"
          (nzOnOk)="_submitForm()">
  <ng-template #couponModalContent>
    <form nz-form #formdata [formGroup]="validateForm" enctype="multipart/form-data">
      <div nz-form-item nz-row style="margin-top:20px;">
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>分类名称：</div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('name')">
          <div class="p-pr" style="width:240px;">
            <nz-input
              formControlName="name"
              placeholder="请输入名称"
              class="ant-input ng-pristine ng-valid ng-touched"
              style="width:200px;" maxlength="30"></nz-input>
            <div style="position: absolute;right: 8px;bottom: 0px;color: #999;">
              {{30-(validateForm.controls.name.value?validateForm.controls.name.value.length:0) }}
            </div>
          </div>
          <div nz-form-explain
               *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">
            请输入{{modelName}}名称
          </div>
          <div nz-form-explain
               *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('maxlength')">
            {{modelName}}名称不能超过30个字
          </div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>排序：</div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('sort')">
          <nz-input-number
            formControlName="sort"
            [nzPlaceHolder]="'请输入排序'"
            [nzStep]="1"
            [nzSize]="'large'"
            style="width: 160px"
          >
          </nz-input-number>
          <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('required')">
            请输入排序
          </div>
          <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('min')">不能低于0
          </div>
          <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('max')">不能超过99
          </div>
          <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('notInteger')">
            请输入整数
          </div>
        </div>
      </div>
    </form>

  </ng-template>
</nz-modal>
<!-- 添加弹窗 end -->
